<template>
  <div>
    <router-view></router-view>
    <div class="tabbar">
      <van-tabbar
        v-model="active"
        :route="true"
        v-if="route.meta.isshowtabBar"
        :placeholder="true"
        :fixed="true"
      >
        <van-tabbar-item v-for="icon in icons" :key="icon.name" :to="icon.routerName">
          <span>{{ icon.name }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import CommunityView from './views/communityView.vue';

var route = useRoute()

var icons = [
  {
    name: '首页',
    routerName: '/home',
    active: '../src/assets/images/tabBarImages/home_active.png',
    inactive: '../src/assets/images/tabBarImages/home_inactive.png'
  },
  {
    name: '运动',
    routerName: '/sport',
    active: '../src/assets/images/tabBarImages/sport_active.png',
    inactive: '../src/assets/images/tabBarImages/sport_inactive.png'
  },
  {
    name: '社区',
    routerName: '/community',
    active: '../src/assets/images/tabBarImages/community_active.png',
    inactive: '../src/assets/images/tabBarImages/community_inactive.png'
  },
  {
    name: '我的',
    routerName: '/my',
    active: '../src/assets/images/tabBarImages/my_active.png',
    inactive: '../src/assets/images/tabBarImages/my_inactive.png'
  }
]
</script>

<style lang="scss" scoped></style>
